﻿@{
    ViewBag.Title = "Tree";
}
<script src="~/Scripts/knockout-2.1.0.js"></script>
<h2>Tree</h2>



<div data-bind="template: 'personTemplate'"></div>

<script type="text/ko" id="personTemplate">
    <span data-bind="text: name"></span>
    <select data-bind="options: children, optionsText: 'name', optionsCaption: 'Choose',  value: selectedChild"></select>
    <!-- ko if: showChildren -->
    <div data-bind="template: { name: 'personTemplate', data: selectedChild }"></div>
    <!-- /ko -->
</script>



<script>
    
    var Person = function(data) {
        var self = this;
        self.id = ko.observable(data.id);
        self.name = ko.observable(data.name);
        self.children = ko.observableArray(ko.utils.arrayMap(data.children, function(c) {
            return new Person(c);
        }));
        self.selectedChild = ko.observable();
        self.showChildren = ko.computed(function() {
            return self.selectedChild()
                && self.selectedChild().children().length > 0;
        });
    };

    //var initData = {
    //    id: 1,
    //    name: "Main",
    //    children: [
    //        {
    //        id: 2,
    //        name: "bob",
    //        children:null},
    //        {
    //            id: 3,
    //            name: "ted",
    //            children: [{
    //                id: 5,
    //                name: "albert",
    //                children: [{
    //                    id: 9,
    //                    name: "max"
    //                }]
    //            }, {
    //                id: 9,
    //                name: "fred"
    //            }]
    //        }],
    //    selectedChild: {
    //        id: 2,
    //        name: "bob"
    //    }
    //};

    var initData = {
        Multi: false,
        Must: true,
        name: "品牌",
        IsInputProp: false,
        Pid: 20000,
        Vid:0,
        children: [
            {
                Multi: false,
                Must: true,
                name: "Abbott/雅培",
                IsInputProp: false,
                Pid: 20000,
                Vid: 10000,
            },
             {
                 Multi: false,
                 Must: true,
                 name: "Mead Johnson/美赞臣",
                 IsInputProp: false,
                 Pid: 20000,
                 Vid: 10001,
                 children: [
                      {
                          Multi: false,
                          Must: true,
                          name: "加拿大版",
                          IsInputProp: false,
                          Pid: 20000,
                          Vid: 10002,
                      }, {
                          Multi: false,
                          Must: true,
                          name: "台湾版",
                          IsInputProp: false,
                          Pid: 20000,
                          Vid: 10002,
                      }
                 ]

             }
        ],

    };


    ko.applyBindings(new Person(initData));
</script>